<div class="w-full relative z-[1] mb-4">
    <div class="bg h-[500px]  astro-Q4VA5EPQ">
        <slot></slot>
        <svg class="waves astro-Q4VA5EPQ" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs class="astro-Q4VA5EPQ">
                <path id="gentle-wave"
                    d="M -162 44 c 32 -1 55 -9 88 -9 s 57 10 88 10 s 58 -10 87 -10 s 55 11 87 11 v 7 h -350 z"
                    class="astro-Q4VA5EPQ"></path>
            </defs>
            <g class="parallax astro-Q4VA5EPQ">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" class="astro-Q4VA5EPQ"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" class="astro-Q4VA5EPQ"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" class="astro-Q4VA5EPQ"></use>
                <use xlink:href="#gentle-wave" x="48" y="7" fill="#f1f5f9" class="astro-Q4VA5EPQ"></use>
            </g>
        </svg>
    </div>
</div>

<style>
.waves:where(.astro-Q4VA5EPQ) {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 150px;
}

.parallax:where(.astro-Q4VA5EPQ)>use:where(.astro-Q4VA5EPQ) {
    -webkit-animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax:where(.astro-Q4VA5EPQ)>use:where(.astro-Q4VA5EPQ):nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s
}

.parallax:where(.astro-Q4VA5EPQ)>use:where(.astro-Q4VA5EPQ):nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

.parallax:where(.astro-Q4VA5EPQ)>use:where(.astro-Q4VA5EPQ):nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s
}

.parallax:where(.astro-Q4VA5EPQ)>use:where(.astro-Q4VA5EPQ):nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s
}

@-webkit-keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px,0,0);
        transform: translate3d(-90px,0,0)
    }

    to {
        -webkit-transform: translate3d(85px,0,0);
        transform: translate3d(85px,0,0)
    }
}

@keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px,0,0);
        transform: translate3d(-90px,0,0)
    }

    to {
        -webkit-transform: translate3d(85px,0,0);
        transform: translate3d(85px,0,0)
    }
}


.bg:where(.astro-Q4VA5EPQ) .line:where(.astro-Q4VA5EPQ) {
    background: url(/mask.png) repeat;
    width: 100%;
    position: absolute
}

</style>